<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="模板">
<meta name="description" content="后台管理系统">
<meta name="author" content="soulCoder">
 <div th:include="~{views/common/include :: cssStyle }"></div>
</head>
  
<body>
<div class="coder-layout-web">
  <div class="coder-layout-container">
    <!--左侧导航-->
       <div th:include="~{views/common/include :: #asideStyle }"></div>
    <!--End 左侧导航-->
    
    <!--头部信息-->
      <div th:include="~{views/common/include :: #headerStyle }"></div>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="coder-layout-content">
      <div class="container-fluid">
        <div class="row">
            <div class="card">

              <div class="card-body">
                <div class="col-lg-6">
                  <div class="card">
                    <div class="card-header"><h4>饼图</h4></div>
                    <div class="card-body">
                      <canvas id="chart-pie" width="280" height="280"></canvas>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card">
                    <div class="card-header"><h4>环形图</h4></div>
                    <div class="card-body">
                      <canvas id="chart-doughnut" width="280" height="280"></canvas>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card">
                    <div class="card-header"><h4>面积图</h4></div>
                    <div class="card-body">
                      <canvas id="chart-area-2" width="400" height="250"></canvas>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="card">
                    <div class="card-header"><h4>水平条形图</h4></div>
                    <div class="card-body">
                      <canvas id="chart-hbar-1" width="400" height="250"></canvas>
                    </div>
                  </div>
                </div>

              </div>
            </div>
        </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<div th:include="~{views/common/include :: #jsStyle }"></div>
<!--图表插件-->
<script type="text/javascript">
$(document).ready(function(e) {

    new Chart($("#chart-pie"), {
        type: 'pie',
        data: {
            labels: ["SpringSecurity", "SpringBoot", "Spring",
                "SpringMVC","MyBatis","thymeleaf"],
            datasets: [{
                data: [100,150,200,300,80,320],
                backgroundColor: ['rgba(255,99,132,1)','rgba(54, 162, 235, 1)',
                                   'rgba(255, 206, 86, 1)','rgba(255, 99, 100, 1)'
                                   ,'rgba(255, 99, 100, 1)','#00E5EE']
            }]
        },
        options: {
            responsive: false
        }
    });

    new Chart($("#chart-doughnut"), {
        type: 'doughnut',
        data: {
            labels: ["BootstrapTable", "Bootstrap", "Chart","validator","fileinput","jconfirm"],
            datasets: [{
                data: [100,150,200,300,80,320],
                backgroundColor: ['rgba(255,99,132,1)','rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)','rgba(255, 99, 100, 1)'
                    ,'rgba(255, 99, 100, 1)','#00E5EE']
            }]
        },
        options: {
            responsive: false
        }
    });


    new Chart($("#chart-area-2"), {
        type: 'line',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
            datasets: [{
                label: "前端",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                pointBackgroundColor: "rgba(51,202,185,0.5)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(51,202,185,0.5)",
                data: [0, 59, 80, 58, 20, 55, 40]
            },
                {
                    label: "后端",
                    backgroundColor: "rgba(243,245,246,0.8)",
                    borderColor: "rgba(0,0,0,0)",
                    pointBackgroundColor: "rgba(243,245,246,0.8)",
                    pointBorderColor: "#fff",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(243,245,246,0.8)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }]
        },
        options: {}
    });


    new Chart($("#chart-hbar-1"), {
        type: 'horizontalBar',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
            datasets: [{
                label: "收入",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: [10, 59, 80, 58, 20, 55, 40]
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

});
</script>
</body>
</html>